﻿<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>

  <body>
    <div>
      User:<input type="text" id="userInput" />
      <br />
      Message:<input type="text" id="messageInput" />
      <input type="button" id="sendButton" value="Send Message" />
    </div>
    <ul id="messagesList"></ul>
    <script src="js/signalr.min.js"></script>
    <script src="js/msgpack5.js"></script>
    <script src="js/signalr-protocol-msgpack.js"></script>
    <script>
      var connection = new signalR.HubConnectionBuilder()
        .withUrl('/chatHub')
        .configureLogging(signalR.LogLevel.Debug)
        .withHubProtocol(new signalR.protocols.msgpack.MessagePackHubProtocol())
        .build()

      connection.on('ReceiveMessage', function(user, message) {
        var msg = message
          .replace(/&/g, '&amp;')
          .replace(/</g, '&lt;')
          .replace(/>/g, '&gt;')
        var encodedMsg = user + ' says ' + msg
        var li = document.createElement('li')

        li.textContent = encodedMsg

        console.log(encodedMsg)
        document.getElementById('messagesList').appendChild(li)
      })

      connection
        .start()
        .then(function() {
          document.getElementById('sendButton').disabled = false
        })
        .catch(function(err) {
          return console.error(err.toString())
        })

      document.getElementById('sendButton').addEventListener('click', function(event) {
        var user = document.getElementById('userInput').value
        var message = document.getElementById('messageInput').value
        connection.invoke('SendMessage', user, message).catch(function(err) {
          return console.error(err.toString())
        })
        event.preventDefault()
      })
    </script>
  </body>
</html>
